<template>
        <div class="box">
            <h3>样式穿透</h3>
            <ul>
                <li>每个组件的hashcode值都是唯一的，所以局部样式不会被其他组件共享</li>
                <li>当前组件内部所有的标签都会被增加hashcode编码，而子组件标签的hashcode编码会传递到组件内部的跟标签上</li>
                <li>scoped描述的选择器默认会在末尾基于当前文件的hashcode编码构成属性选择器，实现类似局部的效果</li>
                <li>所有子组件标签上定义的父组件样式，可以直接为子组件根元素实现局部样式加载</li>
                <li>vue-loader 提供样式编译关键字 :deep(穿透选择器) ，用于手动设置hashcode属性选择器的出现位置</li>
            </ul>
            <DeepChild1 class="test" style="color:red"></DeepChild1>
            <DeepChild1 class="box"></DeepChild1>
        
        </div>
</template>
<script>
import DeepChild1 from './components/DeepChild1.vue'
    export default {
        components:{
            DeepChild1
        }
    }
</script>
<style scoped>
    .box :deep(h3){
        color: orangered;
    }
    .box :deep(span){
        background-color: red;
    }
    .test{
        background-color: antiquewhite;
    }
    .test :deep(h3){
        background-color: aqua;
        color: white;
    }
    

</style>